<template>
  <view class="notifications">
    <view class="items">
      <block v-for="(note, index) in notifications" :key="index">
          <view class="item">
            <view class="head">{{ note.human_created_at }}</view>
            <card-com :show-gap="false">
              <view v-if="note.type === 'App\\Notifications\\ShipmentNotification'" class="desc" @click="goToExpress(note.data.order.id)">
                <image class="cover" :src="note.data.order.items[0].product.cover_url"></image>
                <view class="info">
                  <view class="title">{{ note.data.message }}</view>
                  <view class="brief">点击查看物流信息》</view>
                </view>
              </view>
              <view class="desc" v-else>
                <view class="info">
                  <view class="title">{{ note.data.message }}</view>
                </view>
              </view>
            </card-com>
          </view>
      </block>
			<view class="nodata" >目前暂无消息</view>
    </view>
  </view>
</template>

<script>
import {getNotifications, readNotifications} from "api/notificationApi"

export default {
  name: "notifications",
  data() {
    return {
      notifications: [],
			nodata:false
    }
  },
  methods: {
    async readMyNotifications(currentType) {
      await readNotifications({ type:  currentType})
    },
    async loadNotifications(currentType) {
      const response = await getNotifications({ type: currentType })
      this.notifications = response.data
			if(this.notifications.length == 0 ){
				this.nodata = true
			}
    },
    goToExpress(orderId) {
      uni.navigateTo({url: `/packs/pages/order/express?id=${orderId}`})
    }
  },
  onLoad(options) {
    this.loadNotifications(options.type)
    this.readMyNotifications(options.type)
  }
}
</script>

<style lang="scss" scoped>
.notifications {
  .items {
    width: 710rpx;
    margin: 0 auto;
    .item {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      background: #FFFFFF;
      .head {
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
        text-align: center;
      }
      .desc {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .cover {
          display: flex;
          width: 100rpx;
          height: 100rpx;
          border-radius: 10rpx;
          margin-right: 20rpx;
        }
        .info {
          .title {
						width: 540rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
          }
          .brief {
            font-size: 22rpx;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }
}
.nodata{
	padding-top: 30rpx;
	line-height: 120rpx;
	text-align: center;
	font-size: 30rpx;
	color:#999999;
}
</style>
